import React from 'react';
import { Input, Button, Radio, Checkbox, Modal, Space } from 'antd';
import axios from '../../axios/axios'
import moment from 'moment'


export default class Fill extends React.Component {
    constructor(props) {
        super(props);
        // this.handleRadioChange = this.handleRadioChange.bind(this);
        // this.handleCheckboxChange = this.handleCheckboxChange.bind(this);

        this.radioChange = this.radioChange.bind(this);
        this.checkboxChange = this.checkboxChange.bind(this);
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmitQuestionnaire = this.handleSubmitQuestionnaire.bind(this);
        this.state = {
            q_id: 0,
            q_type:'',
            title: '',
            // date: '',
            state: 2,
            questions: [],
            titleEditable:false,
            // addAreaVisible: false,
            numberVisible: true,
        }
    }
    componentWillMount() {
        let _this = this;
        let value = parseInt(this.props.match.params.qid);
        this.setState({
            q_id:value
        })
        console.log(this.state.q_id);
        if (sessionStorage.getItem("status") === "true") {
            axios.post('/getContent', { q_id:value})
                .then(res => {
                    var json = JSON.parse(res.data.data)
                    console.log(json);
                    _this.setState({
                        title: json.title,
                        questions: json.questions,
                        numberVisible: json.numberVisible,
                        state: json.state,
                        q_type: json.q_type
                        // state: json.state
                    })
})
                }
        else {
            alert('请先登录');
            this.props.history.push('/loginfill');
        }
    }

    // handleRadioChange(e, questionIndex) {
    //     let questions = this.state.questions;
    //     questions[questionIndex].value = e.target.value;
    //     this.setState({
    //         questions: questions
    //     });
    // }
    radioChange(e, questionIndex) {
        let questions = this.state.questions;
        // let options = questions[questionIndex].options;
        questions[questionIndex].value = e.target.value;
        this.setState({
            questions: questions
        });
    };
    // handleCheckboxChange(checkedValues, questionIndex) {
    //     let questions = this.state.questions;
    //     questions[questionIndex].value = checkedValues;
    //     this.setState({
    //         questions: questions
    //     });
    // }
    checkboxChange(e, questionIndex, optionIndex) {
        let questions = this.state.questions;
        let options = questions[questionIndex].options;
        options[optionIndex].checked = !options[optionIndex].checked;
        this.setState({
            questions: questions
        });
    };

    handleTextChange(e, questionIndex) {
        console.log(e.target.value);
        let questions = this.state.questions;
        questions[questionIndex].input = e.target.value;
        this.setState({
            questions: questions
        });
    }

    handleGradeChange(e, questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].value = e.target.value;
        this.setState({
            questoins: questions
        });
    }

    handleSubmitQuestionnaire() {
        let _this = this;
        let questions = this.state.questions;
        let answer = 0;
        questions.forEach((item) => {
            switch (item.type) {
                case 'radio':
                    if (item.value === 0 && item.required) {
                        answer++;
                    }
                    break;
                case 'checkbox':
                    try {
                        item.options.forEach((i) => {
                            if (i.checked === true) {
                                console.log(answer);
                                throw new Error("EndIterative");
                            }
                        });
                    } catch (e) {
                        if (e.message != "EndIterative") {
                            answer++;
                            throw e;
                        }
                    };

                    break;

                case 'textarea':
                    if (item.text === '' && item.required) {

                        answer++;
                    }
                    break;
                case 'grade':
                    if (item.value === 0 && item.required) {

                        answer++;
                    }
                    break;
                default:
                    console.log('err in Fill');
            }
        });

        if (answer == 0) {
            Modal.confirm({
                title: '确认提交问卷吗？',
                onOk() {
                    questions.map((question, questionIndex, array) => {
                        if (question.type === 'radio') {
                            let value = question.value-1;
                            let options = question.options;
                            options[value].checked = !options[value].checked;
                        }
                        else if(question.type === 'grade') {
                            let value = question.value-1;
                            let options = question.options;
                            options[value].checked = !options[value].checked;
                            question.value = options[value].grade;
                        }
                    })
                    console.log(_this.state);
                    axios.post('/addContent', _this.state)
                        .then(res => {
                            alert('提交成功');
                        })
                    // const index = me.state.index;
                    // let questionsWithData = questions.map((item) => {
                    //     switch (item.type) {
                    //         case 'radio':
                    //             item.data.push({ '选项': item.value });
                    //             break;
                    //         case 'checkbox':
                    //             const values = item.value.map((i) => {
                    //                 return { '选项': i };
                    //             });
                    //             item.data = item.data.concat(values);
                    //             break;
                    //         case 'textarea':
                    //             // item.data.push(item.text);
                    //             break;
                    //         default:
                    //             console.log('err in Fill');
                    //     }
                    //     return item;
                    // });
                    return (
                        <div style={{ textAlign: 'center', marginTop: 200, fontSize: 24 }}>
                            <strong>您已完成问卷</strong>
                        </div>
                    )

                }
            });
        } else {
            return (Modal.warning({
                title: '请完整填写问卷',
                content: '还有' + (answer) + '个问题没有填写'
            }));
        }
    }

    getTitle() {
        return (
            <div className="editTitle" style={{ margin: '0 20px 20px 20px', padding: 20, textAlign: 'center' }} >
                <h2><strong>{this.state.title}</strong></h2>
            </div>
        );
    }

    // getQuestions() {
    //     let questions = this.state.questions;
    //     const { TextArea } = Input;
    //     const optionStyle = {
    //         display: 'block',
    //         height: '32px',
    //         lineHeight: '32px'
    //     };

    //     return questions.map((question, questionIndex, array) => {
    //         if (question.type === 'radio') {
    //             return (
    //                 <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
    //                     <span>Q{questionIndex + 1}</span>
    //                     <span style={{ marginLeft: 8 }}>{question.title}</span>
    //                     <div style={{ marginLeft: 3, marginTop: 8 }}>
    //                         <Radio.Group onChange={e => this.handleRadioChange(e, questionIndex)}>
    //                             {question.options.map((option, optionIndex) => {
    //                                 return (
    //                                     <Radio style={optionStyle} value={option.text} key={optionIndex}>{option.text}</Radio>
    //                                 );
    //                             })}
    //                         </Radio.Group>
    //                     </div>
    //                 </div>
    //             );
    //         } else if (question.type === 'checkbox') {
    //             return (
    //                 <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
    //                     <span>Q{questionIndex + 1}</span>
    //                     <span style={{ marginLeft: 8 }}>{question.title}</span>
    //                     <div style={{ marginLeft: 3, marginTop: 8 }}>
    //                         <Checkbox.Group onChange={(checkedValues) => this.handleCheckboxChange(checkedValues, questionIndex)}>
    //                             {question.options.map((option, optionIndex) => {
    //                                 return (
    //                                     <Checkbox style={optionStyle} value={option.text} key={optionIndex}>{option.text}</Checkbox>
    //                                 );
    //                             })}
    //                         </Checkbox.Group>
    //                     </div>
    //                 </div>
    //             );
    //         } else if (question.type === 'textarea') {
    //             return (
    //                 <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
    //                     <span>Q{questionIndex + 1}</span>
    //                     <span style={{ marginLeft: 8 }}>{question.title}</span>
    //                     <div style={{ margin: '16px 4px' }}>
    //                         <TextArea rows={5} value={question.text} onChange={(e) => this.handleTextChange(e, questionIndex)} />
    //                         <Checkbox style={{ marginTop: 8 }} defaultChecked={question.required} disabled>此题是否必填</Checkbox>
    //                     </div>
    //                 </div>
    //             );
    //         }
    //         else {
    //             return null;
    //         }
    //     })
    // }

    getQuestions() {
        let questions = this.state.questions;
        const { TextArea } = Input;
        return questions.map((question, questionIndex, array) => {
            if (question.type === 'radio') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group style={{ textAlign: 'left' }} value={question.value}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex+1} style={{ fontSize: 16 }} onChange={(e) => this.radioChange(e, questionIndex)}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group value={question.value} style={{ textAlign: 'left' }}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex+1} style={{ fontSize: 16 }} onChange={(e) => this.radioChange(e, questionIndex)}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    );
                }

            }
            else if (question.type === 'checkbox') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} onChange={(e) => this.checkboxChange(e, questionIndex, optionIndex)}>{option.text}</Checkbox>
                                    )
                                })}
                            </Space>
                        </div>
                    );
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>

                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} onChange={(e) => this.checkboxChange(e, questionIndex, optionIndex)}>{option.text}</Checkbox>
                                    )
                                })}
                            </Space>
                        </div>
                    );
                }
            }

            else if (question.type === 'textarea') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>

                                <TextArea rows={5} value={question.text} onChange={(e) => this.handleTextChange(e, questionIndex)} />
                            </div>
                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>
                                <TextArea rows={5} value={question.text} onChange={(e) => this.handleTextChange(e, questionIndex)} />
                            </div>
                        </div>
                    )
                }

            }


            else if (question.type === 'grade') {


                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group value={question.value}>

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex+1} key={optionIndex} onChange={(e) => this.radioChange(e, questionIndex)}>{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group onChange={(e) => this.radioChange(e, questionIndex)} value={question.value}>

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex+1} key={optionIndex} onChange={(e) => this.radioChange(e, questionIndex)}>{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>
                        </div>
                    )
                }
            }

            else {
                return null;
            }
        })
    }

    getFooter() {
        return (
            <div style={{ padding: 20, textAlign: 'center' }}>
                <Button type="primary" size="large" onClick={this.handleSubmitQuestionnaire}>提交问卷</Button>
            </div>
        );
    }

    render() {
        if (this.state.state === 2) {
            if(this.state.q_type==='考试问卷'){
                return(
                    <div>
                    {this.getTitle()}
                    <div style={{ marginBottom: 20, padding: 20, borderTop: '2px solid #ccc', borderBottom: '2px solid #ccc' }}>
                        {this.getQuestions()}
                    </div>
                    {this.getFooter()}
                </div>
                )
            }
            else {
            return (

                <div>
                    {this.getTitle()}
                    <div style={{ marginBottom: 20, padding: 20, borderTop: '2px solid #ccc', borderBottom: '2px solid #ccc' }}>
                        {this.getQuestions()}
                    </div>
                    {this.getFooter()}
                </div>
            );}
        }
        else {
            return (
                <div style={{ textAlign: 'center', marginTop: 200, fontSize: 24 }}>
                    <strong>问卷已过期</strong>
                </div>
            )

        }

    }
}